<template>
	<view>
		<top-navigation :onlyShowStatusBar="true" :isFix="false" bgColor="#fff"></top-navigation>
		<view class="search">
			<view class="back-button">
				<image src="/static/images/back-icon.png" mode="aspectFit"></image>
			</view>
			<view class="search-box">
				<view class="search-img">
					<u-icon name="search" :size="'50rpx'"></u-icon>
				</view>
				<view><input type="text" placeholder="请输入城市名称" class="input-input" v-model="searchContent" /></view>
			</view>
		</view>
		<alphabetic-list ref="alphabeticList" :scrollToHeight="calculateHeight">
			<template #content>
				<view class="history-hot">
					<view class="title" v-show="historicalRecord.record.length > 0">
						<text>历史搜索</text>
						<text style="font-size: 24rpx;" @tap="clearHistory">清空历史搜索</text>
					</view>
					<view class="labels">
						<block v-for="(item, id) in historicalRecord.record" :key="id">
							<view class="label" v-if="item" @tap="chooseCity(item)">{{ item.name }}</view>
						</block>
					</view>

					<view class="title" v-if="hotList.length > 0">热门城市</view>
					<view class="labels">
						<block v-for="(item, hotIndex) in hotList" :key="hotIndex">
							<view class="label" v-if="item.city" @tap="chooseCity(item)">{{ item.name }}</view>
						</block>
					</view>
				</view>
				<!-- 城市循环体 -->
				<view class="block-letters" v-for="(value, key, letter) in searchCheck" :key="letter">
					<block v-if="value.length > 0">
						<text class="letter-text" :id="key" :ref="key">{{ key }}</text>
						<view class="brand-name" v-for="(item, index) in value" :key="index" @tap="()=>chooseCity(item)">{{ item.name }}</view>
					</block>
				</view>
			</template>
		</alphabetic-list>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				letterList: [], //处理后的数据表#
				searchContent: '', //搜索的内容
				hotList: [{
						"name": "上海市",
						"city": "上海市",
						"cityid": "310000",
						"provinceid": "310000"
					},
					{
						"name": "沈阳市",
						"city": "沈阳市",
						"cityid": "210100",
						"provinceid": "210000"
					},
					{
						"name": "白城市",
						"city": "白城市",
						"cityid": "220800",
						"provinceid": "220000"
					},
					{
						"name": "北京市",
						"city": "北京市",
						"cityid": "110000",
						"provinceid": "110000"
					},
					{
						"name": "沈阳市",
						"city": "沈阳市",
						"cityid": "210100",
						"provinceid": "210000"
					},
					{
						"name": "白城市",
						"city": "白城市",
						"cityid": "220800",
						"provinceid": "220000"
					}
				], //热门城市
				historicalRecord: {
					ceil: 7,
					record: []
				}, //历史记录
			}
		},
		mounted() {
			// 获取选择城市历史记录
			this.historicalRecord = uni.getStorageSync('historicalRecordCity') || this.historicalRecord
			// 获取城市信息
			this.getCityList()
		},
		computed: {
			calculateHeight() {
				// 106rpx为搜索栏的高度
				return `calc(${this.screenHeight}px - ${this.statusHeight}px - 106rpx`
			},
			// 搜索校验
			searchCheck() {
				let temp = this.letterList;
				let searchNumberCount = 0;
				let circularObject = {};
				for (let i in temp) {
					circularObject[i] = [];
					for (let j in temp[i]) {
						if (temp[i][j].name.includes(this.searchContent) || this.searchContent.length == 0) {
							if (temp[i][j].name.length > 0) {
								circularObject[i].push(temp[i][j]);
								searchNumberCount++;
							}
						}
					}
				}
				// 延时相应
				clearTimeout(this.searchTimer);
				if (searchNumberCount <= 0 && this.searchContent) {
					this.searchTimer = setTimeout(() => {
						uni.showToast({
							title: '没有相关城市',
							icon: 'none'
						})
					}, 1000);
				}
				return circularObject;
			}
		},
		methods: {
			getCityList() {
				// 如果有最后获取时间，并且有城市信息则判断
				if (uni.getStorageSync('lastTimeRequestCity') && uni.getStorageSync('cityArray')) {
					// 计算两个时间戳差了多少天
					let datediff = new Date().getTime() - uni.getStorageSync('lastTimeRequestCity');
					datediff = parseInt(datediff / (1000 * 60 * 60 * 24));
					// 如果大于七天则重新获取
					if (datediff > 7) {
						this.getCity()
					} else {
						this.format(uni.getStorageSync('cityArray'))
					}
				} else {
					this.getCity()
				}
			},
			async getCity() {
				const params = {
					level: 2
				}
				const {
					data
				} = await this.$request('/common/city/getCity', params)
				uni.setStorageSync('cityArray', data)
				uni.setStorageSync('lastTimeRequestCity', new Date().getTime());
				this.format(data)
			},
			format(data) {
				this.letterList = this.$refs.alphabeticList.format(data, 'city')
			},
			// 点击历史搜索
			chooseCity(value) {
				// 如果已经
				if (this.historicalRecord.ceil == this.historicalRecord.record.length) {
					this.historicalRecord.record.pop();
				}
				// 如果本次所查数据已存在于历史记录，则将数据从历史记录中删除
				let temp = this.historicalRecord.record.findIndex(item => item.name === value.name)
				if (temp >= 0) {
					this.historicalRecord.record.splice(temp, 1)
				}
				// 将本次选中的城市从历史记录中提前
				this.historicalRecord.record.unshift(value);
				uni.setStorageSync('historicalRecordCity', this.historicalRecord);
				console.error('您选择的城市信息是:', value.name, value)
			},
			// 清空历史搜索
			clearHistory() {
				uni.$showModal({
						title: '提示',
						content: '确定清空城市历史搜索记录吗'
					})
					.then(() => {
						this.historicalRecord.record = [];
						uni.setStorageSync('historicalRecordCity', this.historicalRecord);
					})
			},
		}

	}
</script>
<style lang="scss">
	page {
		background: $uni-bg-color-grey;
	}

	.search {
		height: auto;
		display: flex;
		align-items: center;
		height: 106rpx;
		background: $uni-bg-color;

		.search-box {
			display: flex;
			width: 572rpx;
			align-items: center;
			border: 1rpx solid #a6a6a6;
			border-radius: 12rpx;

			.search-img {
				width: 80rpx;
				height: 64rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 44rpx;
					height: 44rpx;
				}
			}

			.input-input {
				border-radius: 6rpx;
				font-size: 26rpx;
				width: 400rpx;
				height: 60rpx;
			}
		}

		.back-button {
			font-size: 40rpx;
			width: 40rpx;
			display: flex;
			align-items: center;
			font-weight: 100;

			image {
				width: 36rpx;
				height: 36rpx;
			}

			margin-left: 34rpx;
			margin-right:30rpx;
		}
	}

	.history-hot {
		width: 750rpx;
		height: auto;
		padding: 0rpx 20rpx 0rpx 36rpx;
		background: $uni-bg-color-grey;

		.title {
			width: 660rpx;
			height: 70rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// padding-right: 16rpx;
		}

		.labels {
			width: 680rpx;
			height: auto;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;

			.label {
				width: 148rpx;
				height: 52rpx;
				border: 10rpx;
				text-align: center;
				line-height: 52rpx;
				margin: 10rpx 20rpx 20rpx 0rpx;
				//超出省略
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				background: $uni-bg-color;
				border-radius: 10rpx;
			}
		}
	}

	.block-letters {
		.letter-text {
			width: 750rpx;
			height: 75rpx;
			padding-left: 36rpx;
			display: flex;
			align-items: center;
			background: $uni-bg-color-grey;
		}

		.brand-name {
			height: 120rpx;
			padding: 0rpx 36rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 32rpx;
			border-bottom: 1rpx solid #fafafa;
			background: $uni-bg-color;

			.head-portrait {
				width: 80rpx;
				height: 80rpx;
				border-radius: 100rpx;
				margin: 0rpx 20rpx;
				background-color: #aaaaaa;
			}

			.check {
				width: 35rpx;
				height: 35rpx;
				border-radius: 100rpx;
				border: 1px solid #cbcbcb;
				box-sizing: border-box;
			}

			.uncheck {
				width: 35rpx;
				height: 35rpx;
				border-radius: 100rpx;
				box-sizing: border-box;
			}
		}
	}
</style>
